<style scoped>
    .tree-div {
        max-height: 500px;
        overflow-y: scroll;
    }
</style>

<template>
    <div>
        <div class="tree-div">
            <Tree ref="tree"
                  :data="treeList"
                  :show-checkbox="showCheckbox"
                  @on-select-change="treeSelect"
                  @on-check-change="treeCheck"></Tree>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';

    export default {
        props: {
            showCheckbox: false,
            formData: {},
            url: ''
        },
        data () {
            return {
                treeList: [],
                selectData: [], // 当前已选中的节点数组
                checkedData: [] // 当前已勾选节点的数组
            };
        },
        mounted () {
            this.loadList();
        },
        methods: {
            loadList () {
                let _this = this;
                util.ajax.post(this.url, util.toFormData(this.formData)).then(res => {
                    let data = res.data.data;
                    data.forEach(item => {
                        if (item.parentid == 0 || item.parentid == '') {
                            _this.treeList.push({
                                id: item.id,
                                title: item.name,
                                expand: true,
                                children: [],
                                item: item
                            });
                        }
                    });
                    this.createTree(this.treeList, data);
                });
            },
            createTree (tree, data) {
                let childTree = [];
                let _this = this;
                tree.forEach(treeItem => {
                    childTree = [];
                    data.forEach(dataItem => {
                        if (treeItem.id === dataItem.parentid) {
                            childTree.push({
                                id: dataItem.id,
                                title: dataItem.name,
                                expand: true,
                                children: [],
                                item: dataItem
                            });
                        }
                    });
                    if (childTree.length > 0) {
                        treeItem.children = childTree;
                        _this.createTree(childTree, data);
                    }
                });
            },
            treeSelect () {
                this.selectData = this.$refs.tree.getSelectedNodes();
            },
            treeCheck () {
                this.checkedData = this.$refs.tree.getCheckedNodes();
            },
            cancelSelect () {
                this.ergodicCancel(this.treeList);
                this.selectData = [];
                this.checkedData = [];
            },
            ergodicCancel (list) {
                list.forEach(item => {
                    item.selected = false;
                    item.checked = false;
                    this.ergodicCancel(item.children);
                });
            }
        }
    }
</script>